<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>MI</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        .box{
            width: 1226px;
            height: 460px;
            border: 1px red solid;
            margin: 0 auto;
            position: relative;
        }
        .left{
            width: 234px;
            height: 460px;
            position: absolute;
            background-color: rgba(0,0,0,0.5);
            left: 0;
            top: 0;
            line-height: 42px;
            box-sizing: border-box;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }
        .left>li{
            color: white;
            height: 42px;
            padding-left: 30px;
        }
        .left>li:hover{
            background-color: #ff7300;
        }
    /*  并集选择器  */
        .leftjt,.rightjt{
            width: 41px;
            height: 69px;
            background-image: url("https://i1.mifile.cn/f/i/2014/cn/icon/icon-slides.png");
            background-repeat: no-repeat;
            position: absolute;
            top: calc(50% - 69px / 2);
        }
        .leftjt{
            background-position: -84px 0;
            left: 234px;
        }
        .rightjt{
            background-position: -125px 0;
            right: 0;
        }
        .leftjt:hover{
            background-position: 0 0;
        }
        .rightjt:hover{
            background-position: -41px 0;
        }
        .radio{
            position: absolute;
            right: 40px;
            bottom: 20px;
        }
    </style>
</head>
<body>
<div class="box">
    <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/5ee39da0bc802e61046ef16524deb326.jpg?thumb=1&w=1226&h=460&f=webp&q=90" />
    <ul class="left">
        <li>手机</li>
        <li>电视</li>
        <li>家电</li>
        <li>笔记本 平板</li>
        <li>出行 穿戴</li>
        <li>健康 儿童</li>
        <li>生活 箱包</li>
        <li>智能 路由器</li>
        <li>电源 配件</li>
    </ul>
    <div class="leftjt"></div>
    <div class="rightjt"></div>
    <div class="radio">
        <input name="a" type="radio" />
        <input name="a" type="radio" />
        <input name="a" type="radio" />
        <input name="a" type="radio" />
    </div>
</div>
</body>
</html>